<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-10-22 19:27:04
 * @LastEditTime: 2023-10-22 21:43:41
 * @LastEditors: ''
-->
<template>
  <div class="demo-inner-divider">基本使用</div>
  <p>通过间距组件来给多个组件之间提供间距</p>
  <e-space wrap>
    <e-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
      <template #title>
        <e-icon type="share1"></e-icon>
        Classic film
      </template>
      <template #extra>
        <a href="#">
          <e-icon type="label"></e-icon>
          Change
        </a>
      </template>
      <div v-for="o in 4" :key="o" class="text item">
        {{ 'List item ' + o }}
      </div>
    </e-card>
  </e-space>
  <div class="demo-inner-divider">垂直布局</div>
  <p>使用 direction 来控制布局的方式, 背后实际上是利用了 flex-direction 来控制.</p>
  <e-space direction="vertical">
    <e-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
      <template #title>
        <e-icon type="share1"></e-icon>
        Classic film
      </template>
      <template #extra>
        <a href="#">
          <e-icon type="label"></e-icon>
          Change
        </a>
      </template>
      <div v-for="o in 4" :key="o" class="text item">
        {{ 'List item ' + o }}
      </div>
    </e-card>
  </e-space>

  <div class="demo-inner-divider">控制间距的大小</div>
  <p>使用内置的 small、default、large 来设置间距大小，分别对应 8px、12px 和 16px 的间距。 默认的间距大小为 small，也就是 8px。</p>
  <e-space direction="vertical" alignment="start" :size="30">
    <e-radio-group v-model="size">
      <e-radio :label="'large'">large</e-radio>
      <e-radio :label="'default'">default</e-radio>
      <e-radio :label="'small'">small</e-radio>
    </e-radio-group>

    <e-space wrap :size="size">
      <e-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
        <template #title>
          <e-icon type="share1"></e-icon>
          Classic film
        </template>
        <template #extra>
          <a href="#">
            <e-icon type="label"></e-icon>
            Change
          </a>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </e-card>
    </e-space>
  </e-space>

  <div class="demo-inner-divider">自定义size</div>
  <e-slider v-model="customSize" />
  <e-space wrap :size="customSize">
    <e-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
      <template #title>
        <e-icon type="share1"></e-icon>
        Classic film
      </template>
      <template #extra>
        <a href="#">
          <e-icon type="label"></e-icon>
          Change
        </a>
      </template>
      <div v-for="o in 4" :key="o" class="text item">
        {{ 'List item ' + o }}
      </div>
    </e-card>
  </e-space>

  <div class="demo-inner-divider">自动换行</div>
  <p>在 水平 (horizontal) ** 模式下, 通过控制 wrap（布尔类型）**来控制是否自动换行</p>
  <e-space wrap>
    <div v-for="i in 20" :key="i">
      <e-button type='text'> Text button </e-button>
    </div>
  </e-space>

  <div class="demo-inner-divider">行间分隔符</div>
  <p></p>
  <e-space :size="spacerSize" spacer="|">
    <div v-for="i in 2" :key="i">
      <e-button> button {{ i }} </e-button>
    </div>
  </e-space>

  <div class="demo-inner-divider">对齐方式</div>
  <div class="alignment-container">
    <e-space>
      string
      <e-button> button </e-button>
      <e-card>
        <template #title> header </template>
        body
      </e-card>
    </e-space>
  </div>
  <div class="alignment-container">
    <e-space alignment="flex-start">
      string
      <e-button> button </e-button>
      <e-card>
        <template #title> header </template>
        body
      </e-card>
    </e-space>
  </div>
  <div class="alignment-container">
    <e-space alignment="flex-end">
      string
      <e-button> button </e-button>
      <e-card>
        <template #title> header </template>
        body
      </e-card>
    </e-space>
  </div>

  <div class="demo-inner-divider">填充容器</div>
  <div>
    <div style="margin-bottom: 15px">fill: <e-switch v-model="fill" /></div>
    <e-space :fill="fill" wrap>
      <e-card v-for="i in 3" :key="i" class="box-card">
        <template #title>
          <div class="card-header">
            <span>Card name</span>
            <e-button  type='text'>Operation button</e-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </e-card>
    </e-space>
  </div>

  <div>
    <div style="margin-bottom: 15px">
      direction:
      <e-radio-group v-model="direction">
        <e-radio label="horizontal">horizontal</e-radio>
        <e-radio label="vertical">vertical</e-radio>
      </e-radio-group>

    </div>
    <div style="margin-bottom: 15px">
      fillRatio:<e-slider v-model="fillRatio" />
    </div>
    <e-space
      fill
      wrap
      :fill-ratio="fillRatio"
      :direction="direction"
      style="width: 100%"
    >
      <e-card v-for="i in 5" :key="i" class="box-card">
        <template #title>
          <div class="card-header">
            <span>Card name</span>
            <e-button class="button" text>Operation button</e-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </e-card>
    </e-space>
  </div>
  <spaceMd class="markdown-body" />
</template>

<script setup>
import { ref } from 'vue'

import spaceMd from "../../docs/space.md"

const size = ref('default')

const customSize = ref(20)

const spacerSize = ref(10)
const fill = ref(true)

const direction = ref('horizontal')
const fillRatio = ref(30)
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
